<template>
    <el-container class="sys_parameter">
        <el-main>
            <el-card class="box-card">
                <div style="margin-top: 2em;">
                    <el-button type="primary" @click="showPwdDialog('')" v-btnLoading
                               style="margin-left: 50px;width: 100px;">清除业务数据
                    </el-button>
                    <el-button type="primary" @click="showPwdDialog('demo')" v-btnLoading
                               style="margin-left: 50px;width: 180px;">清除业务数据并生成演示数据
                    </el-button>
                </div>
            </el-card>
            <el-dialog title="安全确认" :visible.sync="dialogOptions.visible" v-dialogDrag width="350px">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row>
                        <el-col :span="24">
                            <el-alert type="warning" show-icon effect="dark" title="系统初始化，当前已有数据将彻底消失，请谨慎操作！！！"
                                      :closable="false"/>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px;">
                        <el-col :span="24">
                            <el-form-item label="登录密码" prop="password">
                                <el-input
                                    v-model="form.password"
                                    placeholder="请输入当前账户登录密码"
                                    show-password
                                    clearable
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogOptions.visible = false">关 闭</el-button>
                    <el-button type="primary" @click="saveInit" v-btnLoading>确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    import md5 from 'js-md5';

export default {
    name: "JxcInitData",
    data() {
        let $this = this;
        return {
            dialogOptions: {
                visible: false,
            },
            form: {
                password: ""
            },
            rules: {
                name: [
                    {required: true, message: '请输入参数名称', trigger: 'blur'},
                    {
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,32}$/,
                        message: '最大 32 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符'
                    }
                ],
                value: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                    //目前只兼容中文、大小写英文、数字
                    {
                        pattern: /^[A-Za-z0-9+-_.]{1,32}$/,
                        message: '最大32位字符，大小写英文、数字或者以下特殊字符（+-_.），不能包含特殊字符'
                    }
                ],
            },
            //弹窗option
            dialogOption: {
                visible: false,
            },
        }
    },
    mounted() {
    },
    methods: {
        showPwdDialog(type) {
            this.form = {password: '',type};
            this.dialogOptions = $.extend({}, this.dialogOptions, {visible: true});
        },
        //保存/更新设置
        saveInit() {
            let $this = this;
            let q = $.extend({}, $this.form);
            q.password = md5(q.password);
            $this.fetchData($this.$api.API_JxcDataInit, q).then(() => {
                $this.$message.success('系统已重建！');
                $this.dialogOptions.visible = false
            }).catch(() => {
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.sys_parameter {
    height: 100%;

    .buttons {
        margin: 0 0 10px 0;
    }
}
</style>
